import React from 'react';
import { Card, Skeleton, Space } from 'antd';
import { useBreakpoint } from '../../../hooks/useBreakpoint';

interface HotItemCardSkeletonProps {
  count?: number;
}

export const HotItemCardSkeleton: React.FC<HotItemCardSkeletonProps> = ({ count = 8 }) => {
  const breakpoint = useBreakpoint();
  const isMobile = breakpoint === 'mobile';

  return (
    <>
      {Array.from({ length: count }).map((_, index) => (
        <Card
          key={index}
          className={`hot-item-card ${isMobile ? 'hot-item-card-mobile' : ''}`}
        >
          <div className={`hot-item-card-body ${isMobile ? 'space-y-2' : 'space-y-3'}`}>
            {/* 标签骨架 */}
            <Space size="small">
              <Skeleton.Button active size="small" style={{ width: 60, height: 22 }} />
              <Skeleton.Button active size="small" style={{ width: 50, height: 22 }} />
            </Space>

            {/* 标题骨架 */}
            <Skeleton
              active
              paragraph={{ rows: 2, width: ['100%', '80%'] }}
              title={false}
            />

            {/* 摘要骨架 */}
            <Skeleton
              active
              paragraph={{ rows: isMobile ? 2 : 3, width: ['100%', '95%', '85%'] }}
              title={false}
            />

            {/* 热度和时间骨架 */}
            <div className="flex justify-between items-center mt-3">
              <Skeleton.Button active size="small" style={{ width: 80, height: 20 }} />
              <Skeleton.Button active size="small" style={{ width: 100, height: 20 }} />
            </div>
          </div>

          {/* 操作按钮骨架 */}
          <div className="flex justify-around mt-4 pt-4 border-t">
            <Skeleton.Button active size={isMobile ? 'default' : 'small'} style={{ width: isMobile ? 44 : 60 }} />
            <Skeleton.Button active size={isMobile ? 'default' : 'small'} style={{ width: isMobile ? 44 : 60 }} />
            <Skeleton.Button active size={isMobile ? 'default' : 'small'} style={{ width: isMobile ? 44 : 60 }} />
          </div>
        </Card>
      ))}
    </>
  );
};
